<template>
  <div>
    <Banner :propsbanner='bannerList'></Banner>
    <Mid></Mid>
    <Recommend></Recommend>
    <Scroll></Scroll>
    <Down></Down>
    <Spike :propspike="SpikeList"></Spike>
    <Category></Category>
    <BottomNav :propsurl='arrUrl'></BottomNav>
    <Xiao></Xiao>
    <Hongbao></Hongbao>
    <Tranvel></Tranvel>
  </div>

</template>

<script>
//引入Banner组件
import Banner from './pages/Banner.vue'
import Mid from './pages/Mid.vue'
import Recommend from './pages/Recommend.vue'
import Scroll from './pages/Scroll.vue'
import Down from './pages/Down.vue'
import Spike from './pages/Spike.vue'
import Category from './pages/Category.vue'
import BottomNav from '../default/BottomNav.vue'
import Xiao from './pages/Xiao.vue'
import Hongbao from './pages/Hongbao'
import Tranvel from './pages/Tranvel.vue'

//导出组件
export default {
  name: 'Home',
  //组件列表的调用
  components: {
    Banner,
    Mid,
    Recommend,
    Scroll,
    Down,
    Spike,
    Category,
    BottomNav,
    Xiao,
    Hongbao,
    Tranvel
  },
  data () {
    return {
      arrUrl: ['bottoms/homes.png', 'bottoms/dingdan.png', 'bottoms/slef.png'],
      bannerList: [],
      SpikeList: {},
    }
  },
  //created:当前组件创建之后【el:挂载之前(标签未渲染)，data函数已经完成了初始化】
  // 父组件需要将请求的数据给到子组件的话，满足：1.data函数已初始化；2.响应数据传给子组件(组件已渲染)
  //mouted：组件挂载之后【如果接口复杂/多个接口的时候，优先考虑mounted】
  created () {
    //备份
    let that = this;
    //向dataHome.json文件发起异步请求
    this.axios.get('/api/dataHome.json').then((res) => {
      let data = res.data.Homemsg[0];
      //提取banner组件的数据
      that.bannerList = data.BannerVueList;
      this.SpikeList = data.SpikeVueList;

    }).catch((error) => {
      console.log(error)
    });
  }
}


</script>

<style>
</style>
